import React                from 'react';
import {Link } from 'react-router-dom'
// util
import _mm                  from '../../../util/Mutil.js'
// service
import _product             from '../../../service/productService.js'
// 组件
import PageTitle            from '../../../common/pageTitle';
import CategorySelector     from './categorySelector.js';
import FileUploader         from '../../../common/fileUploader';
import RichEditor           from '../../../common/richEditor';
// css
import './save.scss';

class ProductSave extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      id                  : this.props ? this.props.match.params.pid : '',
      name                : '',
      subtitle            : '',
      categoryId          : 0,
      parentCategoryId    : 0,
      subImages           : [],
      price               : '',
      stock               : '',
      detail              : '',
      status              : 1 //商品状态1为在售
    }
  }
  render(){
    return (
      <div>
        <PageTitle title={this.state.id ? '编辑商品' : '添加商品'} >
          <div className="page-header-right">
            <Link to="/product" className="btn btn-primary">
              <i className="fa fa-back"></i>
              <span>返回</span>
            </Link>
          </div>
        </PageTitle>
        <div className="form-horizontal">
          <div className="form-group">
            <label className="col-md-2 control-label">商品名称</label>
            <div className="col-md-5">
              <input type="text" className="form-control" 
                  placeholder="请输入商品名称"
                  name="name"
                  value={this.state.name}
                  onChange={(e) => this.onValueChange(e)}/>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品描述</label>
            <div className="col-md-5">
              <input type="text" className="form-control" 
                  placeholder="请输入商品描述" 
                  name="subtitle"
                  value={this.state.subtitle}
                  onChange={(e) => this.onValueChange(e)}/>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">所属分类</label>
            <CategorySelector 
              categoryId={this.state.categoryId}
              parentCategoryId={this.state.parentCategoryId}
              onCategoryChange={(categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)}/>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品价格</label>
            <div className="col-md-3">
              <div className="input-group">
                <input type="number" className="form-control" 
                    placeholder="价格" 
                    name="price"
                    value={this.state.price}
                    onChange={(e) => this.onValueChange(e)}/>
                <span className="input-group-addon">元</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品库存</label>
            <div className="col-md-3">
              <div className="input-group">
                <input type="number" className="form-control" 
                    placeholder="库存" 
                    name="stock"
                    value={this.state.stock}
                    onChange={(e) => this.onValueChange(e)}/>
                <span className="input-group-addon">件</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品图片</label>
            <div className="col-md-10">
              {
                this.state.subImages.length ? this.state.subImages.map(
                  (image, index) => (
                  <div className="img-con" key={index}>
                    <img className="img" src={image.url} />
                    <i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}></i>
                  </div>)
                ) : (<div>请上传图片</div>)
              }
            </div>
            <div className="col-md-offset-2 col-md-10 file-upload-con">
              <FileUploader onSuccess={(res) => this.onUploadSuccess(res)}
                  onError={(errMsg) => this.onUploadError(errMsg)}/>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品详情</label>
            <div className="col-md-10">
              <RichEditor 
                detail={this.state.detail}
                defaultDetail={this.state.defaultDetail}
                onValueChange={(value) => this.onDetailValueChange(value)}/>
            </div>
          </div>
          <div className="form-group">
            <div className="col-md-offset-2 col-md-10">
              <button type="submit" className="btn btn-primary" 
                onClick={(e) => {this.onSubmit(e)}}>提交</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
  // 生命周期
  componentDidMount(){
    this.loadProduct();
  }
  // events
  // 加载商品详情
  loadProduct(){
    // 有id的时候，表示是编辑功能，需要表单回填
    if(this.state.id){
      _product.getProduct(this.state.id).then((res) => {
        let images = res.subImages.split(',');
        res.subImages = images.map((imgUri) => {
          return {
            uri: imgUri,
            url: res.imageHost + imgUri
          }
        });
        res.defaultDetail = res.detail;
        this.setState(res);
      }, (errMsg) => {
        _mm.errorTips(errMsg);
      });
    }
  }
  // input值改变
  onValueChange (e) {
    let name = e.target.name,
      value = e.target.value.trim();
    this.setState({
      [name]: value
    })
  }
  // 品类选择器变化
  onCategoryChange(categoryId, parentCategoryId){
    this.setState({
      categoryId          : categoryId,
      parentCategoryId    : parentCategoryId
    });
  }
  // 上传图片成功
  onUploadSuccess(res){
    let subImages = this.state.subImages;
    subImages.push(res);
    this.setState({
      subImages : subImages
    });
  }
  // 上传图片失败
  onUploadError(errMsg){
    _mm.errorTips(errMsg);
  }
  // 删除图片
  onImageDelete(e){
    let index       = parseInt(e.target.getAttribute('index')),
        subImages   = this.state.subImages;
    subImages.splice(index, 1);
    this.setState({
      subImages : subImages
    });
  }
  // 富文本编辑器的变化
  onDetailValueChange(value){
    this.setState({
      detail: value
    });
  }
  getSubImagesString(){
    return this.state.subImages.map((image) => image.uri).join(',');
  }
  // 提交表单
  onSubmit(){
    let product = {
      name        : this.state.name,
      subtitle    : this.state.subtitle,
      categoryId  : parseInt(this.state.categoryId),
      subImages   : this.getSubImagesString(),
      detail      : this.state.detail,
      price       : parseFloat(this.state.price),
      stock       : parseInt(this.state.stock),
      status      : this.state.status
    },
    productCheckResult = _product.checkProduct(product);
    if(this.state.id){
      product.id = this.state.id;
    }
    // 表单验证成功
    if(productCheckResult.status){
      _product.saveProduct(product).then((res) => {
        _mm.successTips(res);
        this.props.history.push('/product/index');
      }, (errMsg) => {
          _mm.errorTips(errMsg);
      });
    }
    // 表单验证失败
    else{
      _mm.errorTips(productCheckResult.msg);
    }
  }
}

export default ProductSave;